<template>
  <div class="v-resume view">
    <div class="view__body">
      <div class="v-resume__introduce">
        <img class="v-resume__introduce-avatar-bg" src="../imgs/resume/avatar@2x.png">
        <avatar :src="d.avatar" :verifiedShow="false"></avatar>
        <div>
          <div class="v-resume__introduce-item">
            <img class="v-resume__introduce-item-icon" src="../imgs/resume/iocn-nianling@2x.png">
            {{profileAge}}
          </div>
          <div class="v-resume__introduce-item">
            <img class="v-resume__introduce-item-icon" src="../imgs/resume/icon-xianzhudi@2x.png">
            {{livingPlaceStr}}
          </div>
          <div class="v-resume__introduce-item">
            <img class="v-resume__introduce-item-icon" :src="constellationIcon">
            {{d.constellation}}
          </div>
        </div>
      </div>
      <div class="v-resume__part1">
        <div class="v-resume__name">{{d.name}}</div>
        <img class="v-resume__gender" v-if="d.gender === 1" src="../imgs/resume/icon-nande@2x.png">
        <img class="v-resume__gender" v-if="d.gender === 2" src="../imgs/resume/iocn-nvde@2x.png">
        <div class="v-resume__status">{{_fmt.getJobStatus(d.job_status)}}</div>
      </div>
      <div class="v-resume__characters">
        <div class="v-resume__character bordered border-ccc" v-for="(item,index) in characters" :key="index">
          <div class="v-resume__character-icon" :class="'v-resume__character-icon--'+(index%5)"></div>
          {{item}}
        </div>
      </div>
      <div class="v-resume__jobs" style="margin-top:10px">
        <div class="v-resume__jobs-label">求职意向：</div>
        <div class="v-resume__job-list" v-if="d.work_jobs_v2.length">
          <div v-for="item in d.work_jobs_v2" class="v-resume__job bordered">{{item.name}}</div>
        </div>
        <div class="v-resume__job-list" v-else>
          <div class="v-resume__job bordered">还没填写哦</div>
        </div>
      </div>
      <div class="v-resume__jobs" style="margin-top:12px;">
        <div class="v-resume__jobs-label">曾经做过：</div>
        <div class="v-resume__job-list">
          <div v-for="item in d.expect_jobs_v2" class="v-resume__job bordered">{{item.name}}</div>
        </div>
      </div>
      <div class="v-resume__jobs" style="margin-top:12px;">
        <div class="v-resume__jobs-label">我的证书：</div>
        <div class="v-resume__job-list" v-if="certificates.length">
          <div v-for="(item,index) in certificates" class="v-resume__job bordered" :key="index">{{item}}</div>
        </div>
        <div class="v-resume__job-list" v-else>
          <div class="v-resume__job bordered">还没填写哦</div>
        </div>
      </div>
      <div class="v-resume__jobs" style="margin-top:12px;">
        <div class="v-resume__jobs-label">期望薪资：</div>
        <div style="font-size:14px;" v-if="d.min_expect_salary && d.max_expect_salary">
          {{d.min_expect_salary}}-{{d.max_expect_salary}}元/月
        </div>
        <div style="font-size:14px;" v-else>
          还没填写哦
        </div>
      </div>
      <div class="v-resume__infos">
        <div class="v-resume__info"><img class="v-resume__info-img" src="../imgs/resume/icon-xueli@2x.png"><span>{{_fmt.getJobEdu(d.education)}}</span></div>
        <div class="v-resume__info"><img class="v-resume__info-img" src="../imgs/resume/icon-jiaxiang@2x.png"><span>{{homeTownStr}}</span></div>
        <div class="v-resume__info"><img class="v-resume__info-img" src="../imgs/resume/icon-jingyan@2x.png"><span>{{_fmt.getExpStr(d.work_year)}}</span></div>
      </div>
      <div class="v-resume__photos" v-if="imgSrc.length">
        <template v-if="imgSrc.length < 3">
          <div class="v-resume__photo" v-for="(img,index) in imgSrc" @click="onSlideTo(index)">
            <img class="v-resume__photo-img" v-lazy.body="img.image_path + '?imageView/1/w/360/h/360'">
          </div>
        </template>
        <template v-else>
          <div class="v-resume__photo" @click="onSlideTo(0)">
            <img class="v-resume__photo-img" v-lazy.body="imgSrc[0].image_path + '?imageView/1/w/360/h/360'">
          </div>
          <div class="v-resume__photo-column">
            <div class="v-resume__photo" @click="onSlideTo(1)" style="height:80px;margin-bottom:10px;">
              <img class="v-resume__photo-img" v-lazy.body="imgSrc[1].image_path + '?imageView/1/w/360/h/360'">
            </div>
            <div class="v-resume__photo" @click="onSlideTo(2)" style="height:80px;">
              <img class="v-resume__photo-img" v-lazy.body="imgSrc[2].image_path + '?imageView/1/w/360/h/360'">
            </div>
          </div>
        </template>
      </div>
      <div class="v-resume__desc">
        <div class="v-resume__desc-title">个性宣言</div>
        <pre class="v-resume__desc-content">{{d.description || '还没填写哦'}}</pre>
      </div>
      <div class="v-resume__exps" v-if="educationExperience.length">
        <div class="v-resume__exps-before"></div>
        <div class="v-resume__exps-title">教育经历</div>
        <div class="v-resume__exp" v-for="(item,index) in educationExperience" :key="index">
          <div class="v-resume__exp-period">{{item.period}}</div>
          <div class="v-resume__exp-company">{{item.school_name}}</div>
          <div class="v-resume__exp-title">{{item.degree}}-{{item.major}}</div>
        </div>
      </div>
      <div class="v-resume__exps" v-if="d.jobExps.length">
        <div class="v-resume__exps-before"></div>
        <div class="v-resume__exps-title">工作经历</div>
        <div class="v-resume__exp" v-for="item in d.jobExps" :key="item.id">
          <div class="v-resume__exp-period">{{item.period}}</div>
          <div class="v-resume__exp-company">{{item.company_name}}</div>
          <div class="v-resume__exp-title">{{item.title}}</div>
          <pre class="v-resume__exp-desc">{{item.description}}</pre>
        </div>
      </div>
    </div>
    <div class="view__footer v-resume-footer" >
      <div class="v-resume-open" @click="openLink">
        打开App
      </div>
      <div class="v-resume-share" @click="downLink">
        下载APP
      </div>
    </div>
    <div class="v-resume-openPopup" @click="popupVisible=false" v-if="popupVisible">
        <img src="../imgs/job-detail/share-arrow.png" >
        <span>点击右上角，选择"浏览器中打开"</span>
    </div>
   <pic-view :imgSrc="imgSrc" :handleChange="handleChange" ref="picView"></pic-view>
  </div>
</template>

<script>
import Vue from 'vue';
import Res from '@/utils/res.js';
import District from '@lib/common/consts/District';
import IconMojie from '@/imgs/resume/icon-mojie@2x.png';
import IconSheshou from '@/imgs/resume/icon-sheshou@2x.png';
import IconShuiping from '@/imgs/resume/icon-shuiping@2x.png';
import IconShuangyu from '@/imgs/resume/icon-shuangyu@2x.png';
import IconBaiyang from '@/imgs/resume/icon-baiyangzuo@2x.png';
import IconJinniu from '@/imgs/resume/icon-jinniu@2x.png';
import IconShuangzi from '@/imgs/resume/icon-shuangzizuo@2x.png';
import IconJuxie from '@/imgs/resume/icon-juxie@2x.png';
import IconShizi from '@/imgs/resume/icon-shizi@2x.png';
import IconChunv from '@/imgs/resume/icon-chunv@2x.png';
import IconTiancheng from '@/imgs/resume/icon-tiancheng@2x.png';
import IconTianxie from '@/imgs/resume/icon-tianxie@2x.png';

export default {
  data() {
    return {
      d: {
        work_jobs_v2: [],
        jobExps: [],
      },
      imgSrc:[],
      popupVisible:false
    }
  },
  computed:{
    constellationIcon() {
      let icon = '';
      switch(this.d.constellation) {
        case '摩羯座':
          return IconMojie;
        case '水瓶座':
          return IconShuiping;
        case '双鱼座':
          return IconShuangyu;
        case '白羊座':
          return IconBaiyang;
        case '金牛座':
          return IconJinniu;
        case '双子座':
          return IconShuangzi;
        case '巨蟹座':
          return IconJuxie;
        case '狮子座':
          return IconShizi;
        case '处女座':
          return IconChunv;
        case '天秤座':
          return IconTiancheng;
        case '天蝎座':
          return IconTianxie;
        default: // '射手座'
          return IconSheshou;
      }
    },
    characters() {
      const characters = this.d.character ? this.d.character.split(',') : [];
      const workAbilities = this.d.work_ability ? this.d.work_ability.split(',') : [];
      return characters.concat(workAbilities);
    },
    certificates() {
      return this.d.certificate ? this.d.certificate.split(',') : [];
    },
    expJobNames() {
      return this.d.expect_jobs_v2.map( (item)=> {
        return item.name;
      }).join('/');
    },
    profileAge() {
      return this._fmt.getAgeStr(this.d.birthday)
    },
    homeTownStr() {
      try {
        const hometown = JSON.parse(this.d.hometown);
        const arr = District.mapHomeTown([hometown.l1_area_id, hometown.l2_area_id]);
        return arr[0].name + arr[1].name;
      } catch (e) {
        return '--';
      }
    },
    openAppLink () {
      if (this.$root.ua.isIos) {
        return 'https://slark.ztcjob.cn?type=applicant&id=' + this.$route.params.id
      } else {
        return "ztcjob://ztc.southflower.cn/activity/share/router?type=applicant&id=" + this.$route.params.id
      }
    },
    livingPlace() {
      try {
        return JSON.parse(this.d.living_place);
      } catch (e) {
        return {};
      }
    },
    livingPlaceStr() {
      const p = this.livingPlace;
      if (!p.l1_area_id) return '**';
      let str = p.province;
      if (p.city) str += p.city;
      if (p.district) str += p.district;
      return str;
    },
    educationExperience() {
      try {
        return JSON.parse(this.d.education_experience);
      } catch (e) {}
      return [];
    },
  },
  created: function () {
    const id = this.$route.params.id;
    Res.getShareData(id).then((arr) => {
      this.d = arr[0]
      this.imgSrc = arr[1]

      Vue.nextTick(() => {
        const nodes = this.$el.querySelectorAll('.v-resume__exps');
        nodes.forEach((node) => {
          const items = node.querySelectorAll('.v-resume__exp');
          const length = items.length - 1;
          if (length >= 1) {
            let h = 0;
            for (let i = 0; i < length; i++) {
              h += items[i].offsetHeight;
            }
            node.querySelector('.v-resume__exps-before').style.height = `${h}px`;
          }
        });
      });
    });
  },
  methods: {
    // playVideo (d) {
    //   this.$el.querySelector('video').play()
    // },
    onSlideTo: function (index,type) {
      this.$refs.picView.popSwiperShow = true
      this.$refs.picView.swiperIndex = index
    },
    openLink(){
    if (this.$root.ua.isWx) {
     this.popupVisible = true
    } else {
      location.href=this.openAppLink
    }
    },
    downLink () { 
      location.href="//a.app.qq.com/o/simple.jsp?pkgname=cn.southflower.ztc"
    },
    handleChange (i) {
      this.$refs.picView.swiperIndex = i
    }
  }
}
</script>

<style lang="stylus">
@import "../vars"

.v-resume
  .view__body
    background-image: url('../imgs/resume/bg-tianchong@2x.png')
    background-size: 40px 40px

.v-resume-footer
  background-color: #fff7e5
  padding: 12px
  display: flex
  box-shadow: 0 -1px 5px 0px rgba(163, 156, 141, 0.15)
  z-index: 2
  div
    text-align center
    height 40px
    line-height 40px
    border-radius 20px
    border 1px solid $theme
  .v-resume-open
    color $theme
    flex 1 1
    margin-right 10px
  .v-resume-share
    flex 2 1
    color #fff
    background-color $theme

.v-resume-sharePopup
  position fixed
  z-index 9999
  width 100%
  height 100%
  top 0
  left 0
  background-color rgba(0,0,0,.3)
  padding 40px 0 100px
  text-align center
  img
   width 130px
   height 130px
   position absolute
   right 20px
   top 0px
  span
    display inline-block
    margin-top 110px
    color #fff
    font-size 18px

.v-resume__introduce
  padding-top: 56px
  padding-left: 148px
  position: relative
.v-resume__introduce .c-avatar-container
  position: absolute
  left: 20px
  top: 42px
.v-resume__introduce .c-avatar
  width: 91px
  height: 91px
.v-resume__introduce-avatar-bg
  position: absolute
  width: 107px
  height: 106px
  left: 12px
  top: 34px
.v-resume__introduce-item
  font-size: 14px
  color: #5e5e5e
  position:relative
  margin-bottom: 12px
  padding-left: 25px
.v-resume__introduce-item-icon
  position: absolute
  width: 13px
  height: 13px
  left: 1px
  top: 1px

.v-resume__part1
  margin-top: 48px
  font-size: 0
  padding-left: 13px
.v-resume__name
  font-size: 30px
  font-weight: 500
  color: #505050
  display: inline-block
.v-resume__status
  font-size: 13px
  color: #999
  display: inline-block
.v-resume__gender
  width: 14px
  height: 20px
  margin-left: 10px
  margin-right: 5px
.v-resume__characters
  display: inline-block
  font-size: 0
  margin-top: 25px
  margin-left: 12px
.v-resume__character
  position: relative
  display: inline-block
  margin-right: 15px
  margin-bottom: 15px
  border-style: solid
  border-radius: 4px
  line-height: 30px
  font-size: 12px
  color: #aaa
  padding-left: 22px
  padding-right: 10px
.v-resume__character-icon
  position: absolute
  left: 11px
  top: 13px
  height: 5px
  width: 5px
  border-radius: 50%
.v-resume__character-icon--0
  background-color: #71ce92
.v-resume__character-icon--1
  background-color: #70c5d1
.v-resume__character-icon--2
  background-color: #a897cb
.v-resume__character-icon--3
  background-color: #f5c578
.v-resume__character-icon--4
  background-color: #e3a6ac

.v-resume__jobs
  display: flex
  padding: 0 0 0 12px
  font-size: 0
  color: #5e5e5e
.v-resume__job-list
  flex: 1 1
.v-resume__jobs-label
  font-size: 14px
.v-resume__job
  display: inline-block
  font-size: 14px
  margin-bottom: 8px
  margin-right: 13px
  padding-right: 13px
  border-right-style: solid
.v-resume__job:last-child
  border-right-style: none
.v-resume__infos
  font-size: 0
  margin-top: 20px
  padding-left: 16px
.v-resume__info
  display: inline-block
  font-size: 14px
  color: #5e5e5e
  margin-right: 20px
.v-resume__info:last-child
  margin-right: 0
.v-resume__info-img
  display: inline-block
  width: 13px
  height: 13px
  margin-right: 7px
  position: relative
  top: 1px

.v-resume__desc
  padding-left: 12px
  padding-top: 38px
.v-resume__desc-title, .v-resume__exps-title
  font-size: 15px
  padding-bottom: 11px
  position: relative
.v-resume__desc-title::after, .v-resume__exps-title::after
  content: ''
  position: absolute
  background-color: $theme
  height: 2px
  bottom: 0
  left: 0px
  width: 30px
.v-resume__desc-content
  position: relative
  font-size: 14px
  line-height: 20px
  color: #5e5e5e
  padding-top: 29px
  padding-left: 18px
  padding-right: 20px
  padding-bottom: 37px
.v-resume__desc-content::before, .v-resume__desc-content::after
  content: ''
  position: absolute
  width: 10px
  height: 8px
  background-size: 10px 8px
.v-resume__desc-content::before
  background-image: url('../imgs/resume/quotation_left@2x.png')
  left: 12px
  top: 15px
.v-resume__desc-content::after
  background-image: url('../imgs/resume/quotation_right@2x.png')
  right: 12px
  bottom: 23px

.v-resume__exps
  position: relative
  padding-left: 12px
.v-resume__exps-before
  position: absolute
  top: 59px
  left: 28px
  height: 0px
  width: 1px
  background-color: $theme
.v-resume__exps-title
  margin-bottom: 25px
.v-resume__exp
  padding: 0 12px 27px 27px
  position: relative
.v-resume__exp::before, .v-resume__exp::after
  content: ''
  position: absolute
  border-radius: 50%
.v-resume__exp::before
  width: 10px
  height: 10px
  background-color: alpha($theme, .45)
  top: 3px
  left: 12px
.v-resume__exp::after
  width: 6px
  height: 6px
  background-color: $theme
  top: 5px
  left: 14px
.v-resume__exp-period
  font-size: 15px
  color: $theme
.v-resume__exp-company
  margin-top: 10px
  font-size: 15px
  color: #5e5e5e
.v-resume__exp-title
  margin-top: 6px
  font-size: 15px
  color: #5e5e5e
.v-resume__exp-desc
  font-size: 14px
  line-height: 20px
  margin-top: 3px
  color: #999
.v-resume__photos
  margin-top: 32px
  padding: 0 2px 0 12px
  display: flex
  height: 170px
.v-resume__photo
  flex: 2 2
  margin-right: 10px
.v-resume__photo-img
  width: 100%
  height: 100%
  object-fit: cover
.v-resume__photo-column
  flex: 1 1
  margin-right: 10px
</style>